<template>
    <!-- 侧边栏 -->
    <el-aside width="200px" height="1000px">
        <el-scrollbar>
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                :default-active="activeIndex" text-color="#fff" 
                :unique-opened="true">
                <!-- 课程设计任务栏 -->
                <el-sub-menu v-for="menu in obj.data" :key="menu.menuid" :index="menu.menuname" class="el-menu-vertical-demo" default-active="2">
                    <template #title>
                        <el-icon>
                            <Monitor />
                        </el-icon><span>{{menu.menuname}}</span>
                    </template>
                    <el-menu-item-group v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">                        
                         <!-- <template #title>Group 1</template> -->
                        <el-menu-item :index="'/' + chmenu.url" @click=" $router.push(chmenu.url)"><span>{{ chmenu.menuname }}</span></el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>
<script setup>
import { ref, reactive,watch } from 'vue'
import { Menu as IconMenu, Message, School, Bicycle, Monitor } from '@element-plus/icons-vue'
import { buildLocaleContext } from 'element-plus';

import { useRouter, useRoute } from 'vue-router'
const route = useRoute();



const obj = reactive({
    data: [
        {
            menuid: 1,
            icon: 'li-icon-dingdanguanli',
            menuname: '校外课题实践',
            hasThird: null,
            url: 'campusOff',
            menus: [
                {
                    menuid: 11,
                    icon: 'icon-order-manage',
                    menuname: '实践课题任务',
                    hasThird: 'N',
                    url: 'outSchema',
                    menus: null
                },     
                {
                    menuid: 12,
                    icon: 'icon-order-manage',
                    menuname: '发布校外实践课题',
                    hasThird: 'N',
                    url: 'offCampus',
                    menus: null
                },
                {
                    menuid: 13,
                    icon: 'icon-order-manage',
                    menuname: '学生选题情况',
                    hasThird: 'N',
                    url: 'outGetStatus',
                    menus: null
                },              
            ]
        },
        {
            menuid: 2,
            icon: 'li-icon-dingdanguanli',
            menuname: '实践过程任务',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 21,
                    icon: 'icon-order-manage',
                    menuname: '管理实践过程任务',
                    hasThird: 'N',
                    url: 'outProTask',
                    menus: null
                },
            ]
        },
        {
            menuid: 3,
            icon: 'li-icon-dingdanguanli',
            menuname: '成绩打分',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 31,
                    icon: 'icon-order-manage',
                    menuname: '报告打分',
                    hasThird: 'N',
                    url: 'teaScoring',
                    menus: null
                },
            ]
        },
        {
            menuid: 4,
            icon: 'li-icon-dingdanguanli',
            menuname: '数据统计',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 41,
                    icon: 'icon-order-manage',
                    menuname: '成绩分析',
                    hasThird: 'N',
                    url: 'outDataAnalysis',
                    menus: null
                },
            ]
        },
        {
            menuid: 5,
            icon: 'li-icon-dingdanguanli',
            menuname: '个人信息',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 51,
                    icon: 'icon-order-manage',
                    menuname: '个人信息',
                    hasThird: 'N',
                    url: 'outTeacherCenter',
                    menus: null
                },
            ]
        },
        
    ],
    
})

// function jump() {    
//     router.push('/pathName')
// }

const activeIndex = ref('')
//监控url变化 
watch(() => route.path, (newPath, oldPath) => {
    const url = '/' + newPath.split('/')[2];
    activeIndex.value = url;
    // 在这里可以执行一些你需要的操作
});


</script>

<style scoped>

</style>
